<template>
    <div class="basicSearch" style="padding: 0 10%;padding-right: 7%;">
      <div class="d-flex flex-column align-items-center db-title">
        <div></div>
        <div class="fa mt-4 mb-2">
          <icon name="cubes" scale="2.7" style="margin-top: -12px;color: #bf6550;"></icon>
          <span class="display-4 ml-4" id="mycard">ASF燃料数据库</span>
        </div>
      </div>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        
        <el-tab-pane name="moreSearch">
          <span slot="label" class="fontClass">混合燃料查询</span>
          <div class="morePage">
            <div class="firstType">
              <div class="header">
                <div class="icon"></div>
                <div class="title">石油基燃料</div>
              </div>
              <div style="padding-left: 20px;margin-top: 20px;">
                <el-tabs tab-position="left" style="height: 100%;">
                  <el-tab-pane label="航空煤油">
                    <div class="nav-tab-wrap">
                      <div class="nav-list">
                        <div v-for="item in current_data_rp" :key="item.ind" class="nav-item"
                          :class="{ 'active': currentTabRp === item.ind }" @click="currentTabRp = item.ind"
                          :style="{ 'background-color': item.color, 'z-index': current_data_rp.length - item.ind, 'color': '#000', 'font-size': '1.4rem' }">
                          {{ item.item }}
                        </div>
                      </div>
                    </div>
                    <div class="typeInfo" v-if='currentTabRp == 1'>
                      <table>
                        <tbody class>
                          <tr v-for='(item, index) in AFSData' :key='index'
                            :style="index % 2 == 0 ? 'background-color:#ececec;font-size:1.3rem' : 'background-color:#fff;font-size:1.3rem'">
                            <td v-for='(e, i) in item.line'
                              style="vertical-align:middle;padding:0.5rem 0;padding-left: 0.5rem;width: 90px;cursor:pointer;color:#000"
                              @click="viewResult(e)">
                              {{ e }}
                            </td>
                          </tr>
                        </tbody>
                      </table>
                    </div>
                    <div class="typeInfo" v-if='currentTabRp == 2'>
                      <table>
                        <tbody class>
                          <tr v-for='(item, index) in RPData' :key='index'
                            :style="index % 2 == 0 ? 'background-color:#ececec;font-size:1.3rem' : 'background-color:#fff;font-size:1.3rem'">
                            <td v-for='(e, i) in item.line'
                              style="vertical-align:middle;padding:0.5rem 0;width:245px;cursor:pointer;color:#000;font-size: 1.2rem;"
                              @click="viewResultRp(e)">
                              {{ e }}
                            </td>
                          </tr>
                        </tbody>
                      </table>
                    </div>
                    <div class="typeInfo" v-if="currentTabRp == 3">
                      <table>
                        <tbody class>
                          <tr v-for='(item, index) in otherData' :key='index'
                            :style="index % 2 == 0 ? 'background-color:#ececec;font-size:1.3rem' : 'background-color:#fff;font-size:1.3rem'">
                            <td v-for='(e, i) in item.line'
                              style="vertical-align:middle;padding:0.5rem 0;padding-left: 0.5rem;width:100px;cursor:pointer;color:#000"
                              @click="viewResultRp(e)">
                              {{ e }}
                            </td>
                          </tr>
                        </tbody>
                      </table>
                    </div>
                  </el-tab-pane>
                  <el-tab-pane label="替代燃料">
                    <div class="nav-tab-wrap">
                      <div class="nav-list">
                        <div v-for="item in current_data_title" :key="item.ind" class="nav-item"
                          :class="{ 'active': currentTabTitle === item.ind }" @click="currentTabTitle = item.ind"
                          :style="{ 'background-color': item.color, 'z-index': current_data_title.length - item.ind, 'font-size': '1.4rem' }">
                          {{ item.item }}
                        </div>
                      </div>
                      <div class="typeInfo" v-if="currentTabTitle == 2">
                        <table>
                          <tbody class>
                            <tr v-for='(item, index) in doubleData' :key='index'
                              :style="index % 2 == 0 ? 'background-color:#ececec;font-size:1.2rem' : 'background-color:#fff;font-size:1.3rem'">
                              <td v-for='(e, i) in item.line'
                                style="vertical-align:middle;padding:0.5rem 0;padding-left: 0.5rem;width:230px;cursor:pointer;color:#000;font-family:'Arial'"
                                @click="goHot(index * 5 + i)">
                                {{ e }}
                              </td>
                            </tr>
                          </tbody>
                        </table>
                      </div>
                      <div class="typeInfo" v-if="currentTabTitle == 5">
                        <table>
                          <tbody class>
                            <tr style="background-color:#ececec;font-size:1.3rem">
                              <td
                                style="vertical-align:middle;padding:0.5rem;cursor:pointer;color:#000;font-family:'Arial'"
                                @click="goFlyHot()">
                                十一烷+十三烷+甲基环己烷+1,3,5-三甲苯+戊基苯
                              </td>
                            </tr>
                          </tbody>
                        </table>
                      </div>
                    </div>
                  </el-tab-pane>
                </el-tabs>
              </div>
            </div>
            <div class="firstType">
              <div class="header">
                <div class="icon"></div>
                <div class="title">煤基燃料</div>
              </div>
  
            </div>
  
            <div class="firstType">
              <div class="header">
                <div class="icon"></div>
                <div class="title">生物燃料</div>
              </div>
  
            </div>
            <div class="firstType">
              <div class="header">
                <div class="icon"></div>
                <div class="title">其他</div>
              </div>
  
            </div>
        
          </div>
          <div class="pageFooter">
            <b-row>
              <db-intro :header="'数据库说明'"
                :introContent="['混合燃料依据来源分为石油基燃料、煤基燃料、生物质燃料以及其他，可直接点击列表名称进行检索。', '检索结构包含混合燃料基本组成信息、物理化学性质和高温理化性能等数据，数据来源包括公开发表文献和实验测试结果等。']"></db-intro>
            </b-row>
          </div>
        </el-tab-pane>
      </el-tabs>
      <notice-modal v-model="fail_modal" type="error" :errMessage="errMessage"></notice-modal>
    </div>
  
  </template>
  
  <script>
  // import {jsme} from "@/assets/jsme/jsme.nocache.js"
  // import SideBar from '@/components/base/SideBar'
//   import JsmeEditor from "@/components/JSME";
//   import TagCloud from "@/components/TagCloud";
//   import FileUpload from "@/components/FileUpload";
//   import ChemDoodle from "@/components/ChemDoodle";
  import DbIntro from "./preView/components/DBIntro.vue";
  import NoticeModal from "../components/NoticeModal.vue";
//   import MathInline from "@/components/base/MathInline";
//   import { Decimal } from 'decimal.js'
//   import axios from 'axios'
  
  const Elements = "H,D,T,He,Li,Be,B,C,N,O,F,Ne,Na,Mg,Al,Si,P,S,Cl,Ar,K,Ca,Sc,Ti,V,Cr,Mn,Fe,Co,Ni,Cu,Zn,Ga,Ge,As,Se,Br,Kr,Rb,Sr,Y,Zr,Nb,Mo,Tc,Ru,Rh,Pd,Ag,Cd,In,Sn,Sb,Te,I,Xe,Cs,Ba,La,Ce,Pr,Nd,Pm,Sm,Eu,Gd,Tb,Dy,Ho,Er,Tm,Yb,Lu,Hf,Ta,W,Re,Os,Ir,Pt,Au,Hg,Tl,Pb,Bi,Po,At,Rn,Fr,Ra,Ac,Th,Pa,U,Np,Pu,Am,Cm,Bk,Cf,Es,Fm,Md,No,Lr,Rf,Db,Sg,Bh,Hs,Mt,Ds,Rg,Cn,Uut,Fl,Uup,Lv,Uus,Uuo".split(',')
  export default {
    name: "ThermoSearch",
    components: {
      //   SideBar,
    //   JsmeEditor,
    //   TagCloud,
    //   FileUpload,
    //   ChemDoodle,
      DbIntro,
      NoticeModal,
    //   MathInline
    },
    file: null,
    data() {
      return {
        AFSData: [{ line: ['AFS_01', 'AFS_02', 'AFS_03', 'AFS_04', 'AFS_05', 'AFS_06', 'AFS_07', 'AFS_08', 'AFS_09', 'AFS_10', 'AFS_11', 'AFS_12', 'AFS_13', 'AFS_14', 'AFS_15', 'AFS_16'] },
        { line: ['AFS_17', 'AFS_18', 'AFS_19', 'AFS_20', 'AFS_21', 'AFS_22', 'AFS_23', 'AFS_24', 'AFS_25', 'AFS_26', 'AFS_27', 'AFS_28', 'AFS_29', 'AFS_30', 'AFS_31', 'AFS_32'] },
  
        ],
        RPData: [
          { line: ['RP-3(2022-CQ)', 'RP-3(2022-DL)', 'RP-3(2022-DQ)', 'RP-3(2022-FJ)', 'RP-3(2022-FS)', 'RP-3(2022-GQ1)', 'RP-3(2022-GQ2)'] },
          { line: ['RP-3(2022-GZ)', 'RP-3(2022-HB)', 'RP-3(2022-HLD)', 'RP-3(2022-HHHT)', 'RP-3(2022-JJ1)', 'RP-3(2022-JJ2)', 'RP-3(2022-JM)',] },
          { line: ['RP-3(2022-JM)', 'RP-3(2022-KLMY)', 'RP-3(2022-LZ)', 'RP-3(2022-NJ)', 'RP-3(2022-PZ)', 'RP-3(2022-QL)', 'RP-3(2022-QY)'] },
          { line: ['RP-3(2022-SJZ)', 'RP-3(2022-TJ)', 'RP-3(2022-WLMQ)', 'RP-3(2022-YN)', 'RP-3(2022-YS)', 'RP-3'] },
  
        ],
        otherData: [
          { line: ['HD-01', 'RX-02', 'RP-1', 'EHF-TU'] },
        ],
        doubleData: [
          { line: ['甲基环己烷+正十二烷', '乙基环己烷+正十二烷', '甲基环己烷+正十四烷', '乙基环己烷+正十四烷', '甲基环己烷+正十六烷'] },
          { line: ['乙基环己烷+正十六烷', '正十二烷+环己烷', '正十二烷+正葵烷', '正葵烷+甲基环己烷'] },
        ],
        fileList: [],
        molIndex: null,
        componentId: 2,
        componentOption: [{
          value: 2,
          text: '二组分'
        }, {
          value: 5,
          text: '五组分'
        }
        ],
        markData: [{
          index: 1,
          molFile: '',
          cas_no: '',
          smiles: null,
          inchi: '',
          inchi_key: '',
          svg_output_path: '',
          formula: '',
        }],
        tableFields: [{
          label: '序号',
          value: 'index'
        }, {
          label: 'mol文件',
          value: 'molFile'
        }, {
          label: '分子式',
          value: 'formula'
        }, {
          label: 'SMILES',
          value: 'smiles'
        }, {
          label: 'CAS_NO',
          value: 'cas_no'
        }, {
          label: 'Inchi',
          value: 'inchi'
        }, {
          label: 'Inchi Key',
          value: 'inchi_key'
        }, {
          label: '物种化学结构',
          value: 'svg_output_path'
        }, {
          label: '操作',
          value: 'control'
        },],
        changeForm1: [{
          label: 'cm-1',
          value: 1
        }, {
          label: 'MHz',
          value: 29979.244
        }, {
          label: '10-18J',
          value: 0.0000197
        }, {
          label: 'ev',
          value: 0.000124
        }, {
          label: 'Hartree',
          value: 0.00000456
        }, {
          label: 'kJ/mol',
          value: 0.0120
        }, {
          label: 'Kcal/mol',
          value: 0.00286
        }, {
          label: 'K',
          value: 1.439
        }, {
          label: 'nm',
          value: 10000000
        },
        ],
  
        changeForm1Bf: null,
        changeForm1Af: null,
        changeForm2: [{
          label: 'atm',
          value: 1
        }, {
          label: 'Pa',
          value: 101325
        }, {
          label: 'kPa',
          value: 101.325
        }, {
          label: 'hPa',
          value: 1013.25
        }, {
          label: 'mmHg',
          value: 760
        }, {
          label: 'in Hg',
          value: 29.921
        }, {
          label: 'bar',
          value: 1.013
        }, {
          label: 'mbar',
          value: 1013.25
        }, {
          label: 'psf',
          value: 2116.217
        }, {
          label: 'psi',
          value: 14.696
        }, {
          label: 'mmH2O',
          value: 10332.313
        }, {
          label: 'kgf/cm²',
          value: 1.033
        }, {
          label: 'kgf/m²',
          value: 10332.275
        }, {
          label: 'MPa',
          value: 0.101
        },
        ],
  
        changeForm2Bf: null,
        changeForm2Af: null,
        changeForm3: [{
          label: '°C',
          value: 1
        }, {
          label: '°F',
          value: 33.8
        }, {
          label: 'K',
          value: 274.15
        }, {
          label: '°R',
          value: 493.47
        }, {
          label: '°RE',
          value: 0.8
        }
        ],
  
        changeForm3Bf: null,
        changeForm3Af: null,
        changeForm4: [{
          label: 'αu',
          value: 1
        }, {
          label: 'Debye',
          value: 2.54
        }, {
          label: 'm×C',
          value: 0.00000000000000000000000000000000848
        },
        ],
  
        changeForm4Bf: null,
        changeForm4Af: null,
        changeForm5: [{
          label: 'αu',
          value: 1
        }, {
          label: 'A',
          value: 0.529
        },
        ],
  
        changeForm5Bf: null,
        changeForm5Af: null,
        flyArray: [],
        typeId: 0,
        indexData: [
          {
            "text": "计算程序",
            "state": {
              "expanded": true,
              "editable": false
            },
            "children": [{
              "text": "单位转化工具",
              "state": {
                "selected": true
              }
            }, {
              "text": "燃料物性预测程序"
            }, {
              "text": "饱和蒸气压计算工具"
            }, {
              "text": "分子结构标识转换工具"
            }, {
              "text": "热力学数据计算程序TDOC"
            },]
          },
          {
            "text": "测试方法",
            "state": {
              "expanded": true,
              "editable": false
            },
            "children": [{
              "text": "密度测量方法"
            }, {
              "text": "热容测量方法"
            }, {
              "text": "热沉测量方法"
            }
              , {
              "text": "比热测量方法"
            }
              , {
              "text": "热导率测量方法"
            }, {
              "text": "混合燃料组分测量方法"
            }
            ]
          },
  
        ],
        treeOptions: {
          editing: false, //true
        },
        computedCount: 0,
        treeTitle: '',
        now_choice: "",
        detailData: {
          "计算程序与测量方法": ["热力学数据高精度计算程序TDOC", "密度测量方法", "热容测量方法", "热沉测量方法", "比热测量方法", "热导率测量方法", "混合燃料组分测量方法"],
        },
  
        intro: '&emsp;&emsp;热力学参数中包含生成焓，熵和等压热容三类数据。最常用基团贡献法对自由基、环状分子、芳香烃等分子的生成焓计算精度较差，远达不到化学精度要求。而原子化焓方法需要昂贵的计算代价，且不适用于大分子物种。广义连接性层次结构 (generalized Connectivity-Based Hierarchy，CBH)方法基于等键反应，将大分子拆分为碎片小分子，从而计算大分子生成焓。然而，研究发现CBH方法并不能完全保留目标大分子的化学环境，会产生一定的误差，而这一误差对芳香烃分子尤为明显。<br>&emsp;&emsp; 四川大学燃烧动力学中心团队通过CBH键差异补偿(Bond Difference Compensation，CBH - LBC)方法，对CBH - 3梯级反应前后的键环境差异进行补偿，消除了CBH方法固有的误差，进而实现了在非常低的计算成本下获得高水平CCSD(T) / CBS(Complete Basis Set)级别的生成焓。受非谐效应和构象的影响，大分子的熵和等压热容与基准值的偏差会越来越大，团队发展了将受阻转子校正和构象采样相结合的方式降低误差，满足化学精度的要求。<br>&emsp;&emsp;为实现高精度热力学数据的批量计算，团队基于上述方法，开发了热力学数据在线/离线计算程序(Thermodynamic Data Online/Offline Calculator, TDOC)。TDOC程序可以一键式批量快速获取物种的高精度热力学数据，使用快捷方便。此外，TDOC程序适用于所有C/H/O分子及自由基物种的热力学数据计算。<br><strong>&emsp;&emsp;程序源码及详细介绍链接：</strong><a :herf="https://github.com/renhaisheng/TDOC/">https://github.com/renhaisheng/TDOC/</a>',
        tableFlag: false,
        methodOptions: [{
          value: 'a',
          label: 'SMILES'
        }, {
          value: 'b',
          label: '分子式'
        }, {
          value: 'c',
          label: 'CAS-NO'
        }],
        selectMethod: "b",
        searchBy: '2',
        searchName: '',
        searchOptions: [{
          value: '1',
          label: '精准查询'
        }, {
          value: '2',
          label: '模糊匹配'
        }],
        activeName: 'moreSearch',
        formulaNotice: false,
        status: "accepted",
        selected: "a",
        //前面采用fixed固定宽度的方式渲染表格，因此需要手动填写宽度
        fields: {
          Index: {
            label: "序号",
            /*根据bootstrap-vue官方文档
             * 1.“You can set the tdClass property inside of your field object”
             *   所以，改变宽度需要用thStyle声明，而不能直接写width
             * 2.“class, thClass, tdClass etc. will not work with classes that are defined in scoped CSS”
             *   所以，thStyle需要显式的写在此处。
             */
            thStyle: { width: '8%' }
          },
          name: {
            label: "名称",
          },
          SMILES: {
            label: "SMILES",
          },
          Formula: {
            label: "分子式",
            thStyle: { width: '16%' }
          },
          detail: {
            label: "详细信息",
            thStyle: { width: '13%' }
          },
        },
        options: [
          { value: "a", text: "分子式" },
          { value: "b", text: "SMILES" },
          { value: "c", text: "在线建模" },
          { value: "d", text: "CAS-NO" },
          { value: "e", text: "上传文件" },
        ],
        methOptions: [
          { value: "a", text: "分子式" },
          { value: "b", text: "CAS-NO" },
        ],
        modelOptions: [
          { value: "a", text: "SMILES" },
          { value: "b", text: "CAS-NO" },
        ],
        modelListOptions: [
          { value: "1", text: "模型预测CN" },
          { value: "2", text: "模型预测BP" },
          { value: "3", text: "模型预测MP" },
          { value: "4", text: "模型预测FP" },
        ],
        current_data_title: [{
          ind: 2,
          item: ' 二组分',
          color: 'rgb(248, 193, 165)'
        }, {
          ind: 3,
          item: ' 三组分',
          color: 'rgb(247, 162, 160)'
        }, {
          ind: 4,
          item: ' 四组分',
          color: 'rgb(248, 193, 165)'
        }, {
          ind: 5,
          item: ' 五组分',
          color: 'rgb(247, 162, 160)'
        }, {
          ind: 6,
          item: ' 六组分',
          color: 'rgb(246, 146, 144)'
        }, {
          ind: 7,
          item: ' 七组分',
          color: 'rgb(246, 146, 144)'
        }, {
          ind: 8,
          item: ' 八组分',
          color: 'rgb(246, 146, 144)'
        }, {
          ind: 9,
          item: ' 九组分',
          color: 'rgb(247, 162, 160)'
        }],
        current_data_rp: [{
          ind: 1,
          item: ' AFS燃料',
          color: 'rgb(248, 193, 165)'
        }, {
          ind: 2,
          item: ' RP-3',
          color: 'rgb(247, 162, 160)'
        },
        {
          ind: 3,
          item: ' 其他',
          color: 'rgb(248, 193, 165)'
        }],
        currentTabTitle: 2,
        currentTabRp: 1,
        componentType: [{ value: 2, label: '二组分' }, { value: 3, label: '三组分' }, { value: 4, label: '四组分' }, { value: 5, label: '五组分' }, { value: 6, label: '六组分' }, { value: 7, label: '七组分' }, { value: 8, label: '八组分' }, { value: 9, label: '九组分' }],
        methSelected: "a",
        modelSelected: 'a',
        modelPickSelected: '1',
        predictValue: '',
        predictTableData: '',
        methCAS_NO: '',
        methFormula: '',
        methStatus: 'accepted',
        methList: [{ item: 1 }],
        methA: 64.083,
        methB: -8981.1,
        methC: -16.845,
        methD: 0,
        methShowD: '',
        methE: 0,
        methShowE: '',
        methT: '',
        methP: '',
        methPKpa: '',
        methSmiles: '',
        methMin: 446.65,
        methMax: 832,
        methTabel: false,
        methCount: false,
        methPick: false,
        modelTable: false,
        methPickList: [],
        entries: [],
        queryData: {},
        predictTable: false,
        SMILES: "",
        CAS_NO: "",
        formula: "",
        queryObj: "",
        fileString: "",
        molFile: "",
        loadingStatus: false,
        fail_modal: false,
        mixData: [
          // {
          //   label: 'RP-3',
          //   name: 'RP-3'
          // },
          {
            label: 'RP-1',
            name: 'RP-1'
          },
          {
            label: 'EHF-TU',
            name: 'EHF-TU'
          },
  
        ],
        mixRPData: [
          {
            label: 'RP-3(2022-CQ)',
            name: 'RP-3(2022-CQ)'
          },
          {
            label: 'RP-3(2022-DL)',
            name: 'RP-3(2022-DL)'
          },
  
  
          {
            label: 'RP-3(2022-DQ)',
            name: 'RP-3(2022-DQ)'
          },
          {
            label: 'RP-3(2022-FJ)',
            name: 'RP-3(2022-FJ)'
          },
          {
            label: 'RP-3(2022-GQ1)',
            name: 'RP-3(2022-GQ1)'
          },
          {
            label: 'RP-3(2022-GQ2)',
            name: 'RP-3(2022-GQ2)'
          },
          {
            label: 'RP-3(2022-QL)',
            name: 'RP-3(2022-QL)'
          },
          {
            label: 'RP-3(2022-QY)',
            name: 'RP-3(2022-QY)'
          },
          {
            label: 'RP-3(2022-GZ)',
            name: 'RP-3(2022-GZ)'
          },
          {
            label: 'RP-3(2022-HB)',
            name: 'RP-3(2022-HB)'
          },
          {
            label: 'RP-3(2022-HLD)',
            name: 'RP-3(2022-HLD)'
          },
          {
            label: 'RP-3(2022-HHHT)',
            name: 'RP-3(2022-HHHT)'
          },
          {
            label: 'RP-3(2022-JJ1)',
            name: 'RP-3(2022-JJ1)'
          },
          {
            label: 'RP-3(2022-JJ2)',
            name: 'RP-3(2022-JJ2)'
          },
          {
            label: 'RP-3(2022-JM)',
            name: 'RP-3(2022-JM)'
          },
          {
            label: 'RP-3(2022-KLMY)',
            name: 'RP-3(2022-KLMY)'
          },
          {
            label: 'RP-3(2022-LZ)',
            name: 'RP-3(2022-LZ)'
          },
          {
            label: 'RP-3(2022-NJ)',
            name: 'RP-3(2022-NJ)'
          },
          {
            label: 'RP-3(2022-PZ)',
            name: 'RP-3(2022-PZ)'
          },
  
          {
            label: 'RP-3(2022-SJZ)',
            name: 'RP-3(2022-SJZ)'
          },
          {
            label: 'RP-3(2022-JM)',
            name: 'RP-3(2022-JM)'
          },
          {
            label: 'RP-3(2022-YN)',
            name: 'RP-3(2022-YN)'
          },
          {
            label: 'RP-3(2022-YS)',
            name: 'RP-3(2022-YS)'
          },
  
        ],
        submitBtn: {
          dataStyle: "expand-right",
          progress: 0,
        },
        CN: '',
        BP: '',
        MP: "",
        FP: '',
        predictData: '',
        errMessage: ""
      };
    },
    methods: {
  
      //五组分跳转
      goFlyHot() {
        let routeData = this.$router.resolve({
          path: "/ccdata/basic_result_flyHot",
        });
  
        window.open(routeData.href, "_blank");
      },
      //计算饱和蒸汽压
      handleMeth() {
        this.methTabel = true
        this.methCount = false
        this.methPick = false
        let para = {}
        if (this.methSelected == 'a') {
          para['formula'] = this.methFormula
          para['partMatch'] = this.methStatus
        } else {
          para['casno'] = this.methCAS_NO
          para['partMatch'] = false
        }
  
        console.log(para);
        this.$http.get('/antoine_organic_compounds', { params: para }).then((res) => {
          if (res.data == 'Failed') {
            this.errMessage = 'Empty Result List'
            this.fail_modal = true
            this.methTabel = false
          }
          this.methList = res.data
        })
      },
      checkMethCount(e) {
        this.methA = e.A
        this.methB = e.B
        this.methC = e.C
        this.methD = e.D
        this.methShowD = e.D1
        this.methE = e.E
        this.methShowE = e.E1
        this.methFormula = e.Formula
        this.methSmiles = e.SMILES
        this.methMin = e.temMin
        this.methMax = e.temMax
        this.methCount = true
        this.methTabel = false
        this.methPick = true
        this.methPickList = [e]
      },
      methTake() {
        let numRegex = /^\d+(\.\d+)?$/;
        if (!numRegex.test(this.methT)) {
          console.log('err1', this.methT);
          this.methT = null
          this.errMessage = 'Not Number'
          this.fail_modal = true;
        } else if (Number(this.methT) <= Number(this.methMax) && Number(this.methT) >= Number(this.methMin)) {
          let lgP = Number(this.methA) + (Number(this.methB) / Number(this.methT)) + (Number(this.methC) * (Math.log10(Number(this.methT)))) + (Number(this.methD) * Number(this.methT)) + (Number(this.methE) * (Number(this.methT) * Number(this.methT)))
          this.methP = ((10 ** Number(lgP).toFixed(3))).toFixed(3);
          this.methPKpa = this.methP * 0.133
          console.log('10*', Number(lgP).toFixed(3), 10 ** 2, (Number(this.methShowD) * Number(this.methT)), Number(this.methShowE));
        } else {
          console.log('err2', this.methT);
          this.methT = null
          this.errMessage = 'Not Number'
          this.fail_modal = true;
        }
  
  
      },
      resForm1() {
  
        for (let i = 0; i < this.changeForm1.length; i++) {
          console.log(this.changeForm1[i].value);
          console.log('type', typeof this.changeForm1[i].value);
          if (typeof this.changeForm1[i].value == 'object' && this.changeForm1[i].value != null) {
            let decimalObj = new Decimal(this.changeForm1[i].value);
            this.changeForm1[i].value = decimalObj.toNumber()
          } else {
            if (this.changeForm1[i].value == null) {
              this.changeForm1[i].value = 0
  
            } else {
              this.changeForm1[i].value = Number(this.changeForm1[i].value).toPrecision(3)
            }
  
          }
          this.changeForm1[i].value = null
  
        }
        this.changeForm1Af = null
        this.changeForm1Bf = null
        console.log('1', this.changeForm1);
      },
  
      resForm2() {
        for (let i = 0; i < this.changeForm2.length; i++) {
          console.log(this.changeForm2[i].value);
          console.log('type', typeof this.changeForm2[i].value);
          if (typeof this.changeForm2[i].value == 'object' && this.changeForm2[i].value != null) {
            let decimalObj = new Decimal(this.changeForm2[i].value);
            this.changeForm2[i].value = decimalObj.toNumber()
          } else {
            if (this.changeForm2[i].value == null) {
              this.changeForm2[i].value = 0
  
            } else {
              this.changeForm2[i].value = Number(this.changeForm2[i].value).toPrecision(3)
            }
  
          }
          this.changeForm2[i].value = null
  
        }
        this.changeForm2Af = null
        this.changeForm2Bf = null
        console.log('2', this.changeForm2);
      },
      resForm3() {
        console.log('3');
        for (let i = 0; i < this.changeForm3.length; i++) {
          console.log(typeof this.changeForm3[i].value);
          if (typeof this.changeForm3[i].value == 'object' && this.changeForm3[i].value != null) {
            let decimalObj = new Decimal(this.changeForm3[i].value);
            this.changeForm3[i].value = decimalObj.toNumber()
          } else {
            if (this.changeForm3[i].value == null) {
              this.changeForm3[i].value = 0
  
            } else {
              this.changeForm3[i].value = Number(this.changeForm3[i].value).toPrecision(3)
            }
  
          }
          this.changeForm3[i].value = null
        }
        this.changeForm3Af = null
        this.changeForm3Bf = null
  
  
      },
      resForm4() {
  
        for (let i = 0; i < this.changeForm4.length; i++) {
          console.log(typeof this.changeForm4[i].value);
          if (typeof this.changeForm4[i].value == 'object' && this.changeForm4[i].value != null) {
            let decimalObj = new Decimal(this.changeForm4[i].value);
            this.changeForm4[i].value = decimalObj.toNumber()
          } else {
            this.changeForm4[i].value = Number(this.changeForm4[i].value).toPrecision(3)
          }
          this.changeForm4[i].value = null
  
        }
        this.changeForm4Af = null
        this.changeForm4Bf = null
        console.log('4', this.changeForm4);
      },
      resForm5() {
  
        for (let i = 0; i < this.changeForm5.length; i++) {
          console.log(typeof this.changeForm5[i].value);
          if (typeof this.changeForm5[i].value == 'object' && this.changeForm5[i].value != null) {
            let decimalObj = new Decimal(this.changeForm5[i].value);
            this.changeForm5[i].value = decimalObj.toNumber()
          } else {
            this.changeForm5[i].value = Number(this.changeForm5[i].value).toPrecision(3)
          }
          this.changeForm5[i].value = null
  
        }
        this.changeForm5Af = null
        this.changeForm5Bf = null
        console.log('5', this.changeForm5);
      },
      bfFromChange1(e) {
        console.log(e);
        this.changeForm1Bf = e.value
      },
      from1Change(item) {
        const bkChangeForm1 = [{
          label: 'cm-1',
          value: 1
        }, {
          label: 'MHz',
          value: 29979.24449814
        }, {
          label: '10-18J',
          value: 1.986447240358E-5
        }, {
          label: 'ev',
          value: 0.0001239841630923
        }, {
          label: 'evHartree',
          value: 4.556335E-6
        }, {
          label: 'KJ/mol',
          value: 0.0119626575425
        }, {
          label: 'Kcal/mol',
          value: 0.00285914577585
        }, {
          label: 'K',
          value: 1.438767571955
        }, {
          label: 'nm',
          value: 10000000
        },
        ]
        if (this.changeForm1Bf == null) {
          for (let i = 0; i < bkChangeForm1.length; i++) {
            if (item.label == bkChangeForm1[i].label) {
              this.changeForm1Bf = bkChangeForm1[i].value
            }
          }
          this.changeForm1 = bkChangeForm1;
        }
        let arr = this.changeForm1;
        this.changeForm1Af = item.value
        const num = this.changeForm1Af / this.changeForm1Bf
        console.log('num', num, this.changeForm1Bf, this.changeForm1Af);
        console.log('value', this.changeForm1, bkChangeForm1);
  
        arr.forEach(form => {
          if (form.label !== item.label) {
            if (typeof form.value == 'object') {
              let decimalObj = new Decimal(form.value);
              form.value = decimalObj.toNumber().toPrecision(3)
            } else {
              form.value = Number(form.value).toPrecision(3)
            }
            console.log('v', this.changeForm1Af, '|', this.changeForm1Bf, '|', num, '|', form.value);
            form.value = new Decimal(num).mul(new Decimal(form.value)).toPrecision(3);
          } else {
            form.value = (new Decimal(item.value)).toNumber().toPrecision(3)
          }
        });
        this.changeForm1 = [...arr]
      },
      bfFromChange2(e) {
        console.log(e);
        this.changeForm2Bf = e.value
      },
      from2Change(item) {
        const bkchangeForm2 = [{
          label: 'atm',
          value: 1
        }, {
          label: 'Pa',
          value: 101325
        }, {
          label: 'kPa',
          value: 101.325
        }, {
          label: 'hPa',
          value: 1013.25
        }, {
          label: 'mmHg',
          value: 760
        }, {
          label: 'in Hg',
          value: 29.9212598
        }, {
          label: 'bar',
          value: 1.01325
        }, {
          label: 'mbar',
          value: 1013.25
        }, {
          label: 'psf',
          value: 2116.2167137
        }, {
          label: 'psi',
          value: 14.6959494
        }, {
          label: 'mmH2O',
          value: 10332.3129
        }, {
          label: 'kgf/cm²',
          value: 1.0332275
        }, {
          label: 'kgf/m²',
          value: 10332.274528
        }, {
          label: 'MPa',
          value: 0.101325
        },
        ]
        if (this.changeForm2Bf == null) {
          for (let i = 0; i < bkchangeForm2.length; i++) {
            if (item.label == bkchangeForm2[i].label) {
              this.changeForm2Bf = bkchangeForm2[i].value
            }
          }
          this.changeForm2 = bkchangeForm2;
        }
        let arr = this.changeForm2;
        this.changeForm2Af = item.value
        const num = this.changeForm2Af / this.changeForm2Bf
        console.log('num', num, this.changeForm2Bf, this.changeForm2Af);
        console.log('value', this.changeForm2, bkchangeForm2);
  
        arr.forEach(form => {
          if (form.label !== item.label) {
            if (typeof form.value == 'object') {
              let decimalObj = new Decimal(form.value);
              form.value = decimalObj.toNumber().toPrecision(3)
            } else {
              form.value = Number(form.value).toPrecision(3)
            }
            console.log('v', this.changeForm2Af, '|', this.changeForm2Bf, '|', num, '|', form.value);
            form.value = new Decimal(num).mul(new Decimal(form.value)).toPrecision(3);
          } else {
            form.value = (new Decimal(item.value)).toNumber().toPrecision(3)
          }
        });
        this.changeForm2 = [...arr]
      },
      bfFromChange3(e) {
        this.changeForm3Bf = e.value
      },
      from3Change(item) {
        const bkChangeForm3 = [{
          label: '°C',
          value: 1
        }, {
          label: '°F',
          value: 33.8
        }, {
          label: 'K',
          value: 274.15
        }, {
          label: '°R',
          value: 493.47
        }, {
          label: '°RE',
          value: 0.8
        }
        ]
        if (this.changeForm3Bf == null) {
          this.changeForm3 = bkChangeForm3
          for (let i = 0; i < bkChangeForm3.length; i++) {
            if (item.label == bkChangeForm3[i].label) {
              this.changeForm3Bf = bkChangeForm3[i].value
            }
          }
        }
        this.changeForm3Af = item.value
        let num = 0
        if (item.label == '°C') {
          num = this.changeForm3Af - this.changeForm3Bf
        } else if (item.label == 'K') {
          num = this.changeForm3Af - this.changeForm3Bf
        } else if (item.label == '°RE') {
  
          num = (new Decimal(this.changeForm3Af).sub(new Decimal(this.changeForm3Bf))).div(new Decimal(0.8)).toPrecision(3)
  
          console.log(num, 'num');
  
        } else if (item.label == '°R') {
  
          num = (new Decimal(this.changeForm3Af).sub(new Decimal(this.changeForm3Bf))).div(new Decimal(1.8)).toPrecision(3)
  
        } else {
          num = (new Decimal(this.changeForm3Af).sub(new Decimal(this.changeForm3Bf))).div(new Decimal(1.8)).toPrecision(3)
        }
  
  
        this.changeForm3.forEach(form => {
          if (item.label == '°C') {
            if (form.label == 'K') {
              form.value = new Decimal(num).add(new Decimal(form.value)).toPrecision(3)
            } else if (form.label == '°RE') {
              form.value = (new Decimal(num).mul(new Decimal(0.8))).add(new Decimal(form.value)).toPrecision(3);
            } else if (form.label == '°C') {
              form.value = item.value;
            } else {
              form.value = (new Decimal(num).mul(new Decimal(1.8))).add(new Decimal(form.value)).toPrecision(3);
            }
          } else if (item.label == 'K') {
            if (form.label == '°C') {
              form.value = new Decimal(num).add(new Decimal(form.value))
            } else if (form.label == '°RE') {
              form.value = (new Decimal(num).mul(new Decimal(0.8))).add(new Decimal(form.value)).toPrecision(3);
            } else if (form.label == 'K') {
              form.value = item.value;
            } else {
              form.value = (new Decimal(num).mul(new Decimal(1.8))).add(new Decimal(form.value)).toPrecision(3);
            }
          } else if (item.label == '°RE') {
            if (form.label == '°C') {
              form.value = new Decimal(num).add(new Decimal(form.value)).toPrecision(3)
            } else if (form.label == '°RE') {
              form.value = item.value;
              // form.value = (new Decimal(num).mul(new Decimal(0.8))).add(new Decimal(form.value));
            } else if (form.label == 'K') {
              form.value = new Decimal(num).add(new Decimal(form.value)).toPrecision(3);
            } else {
              form.value = (new Decimal(num).mul(new Decimal(1.8))).add(new Decimal(form.value)).toPrecision(3);
            }
          } else if (item.label == '°R') {
            if (form.label == '°C') {
              form.value = new Decimal(num).add(new Decimal(form.value)).toPrecision(3)
            } else if (form.label == '°RE') {
  
              form.value = (new Decimal(num).mul(new Decimal(0.8))).add(new Decimal(form.value)).toPrecision(3);
            } else if (form.label == 'K') {
              form.value = new Decimal(num).add(new Decimal(form.value)).toPrecision(3);
            } else if (form.label == '°R') {
              form.value = item.value;
            } else {
              form.value = (new Decimal(num).mul(new Decimal(1.8))).add(new Decimal(form.value)).toPrecision(3);
            }
          } else {
            if (form.label == '°C') {
              form.value = new Decimal(num).add(new Decimal(form.value)).toPrecision(3)
            } else if (form.label == '°RE') {
  
              form.value = (new Decimal(num).mul(new Decimal(0.8))).add(new Decimal(form.value)).toPrecision(3);
            } else if (form.label == 'K') {
              form.value = new Decimal(num).add(new Decimal(form.value)).toPrecision(3);
            } else if (form.label == '°F') {
              form.value = item.value;
            } else {
              form.value = (new Decimal(num).mul(new Decimal(1.8))).add(new Decimal(form.value)).toPrecision(3);
            }
          }
  
  
        });
      },
      bfFromChange4(e) {
        console.log(e);
        this.changeForm4Bf = e.value
      },
      from4Change(item) {
        const bkChangeForm4 = [{
          label: 'αu',
          value: 1
        }, {
          label: 'Debye',
          value: 2.54
        }, {
          label: 'm×C',
          value: 8.478E-30
        },
        ]
        if (this.changeForm4Bf == null) {
          for (let i = 0; i < bkChangeForm4.length; i++) {
            if (item.label == bkChangeForm4[i].label) {
              this.changeForm4Bf = bkChangeForm4[i].value
            }
          }
          this.changeForm4 = bkChangeForm4
        }
        this.changeForm4Af = item.value
        const num = this.changeForm4Af / this.changeForm4Bf
        console.log(this.changeForm4Af, this.changeForm4Bf, num);
        this.changeForm4.forEach(form => {
          if (form.label !== item.label) {
            form.value = new Decimal(num).mul(new Decimal(form.value)).toPrecision(3);
          } else {
            form.value = (new Decimal(item.value)).toNumber().toPrecision(3)
          }
        });
      },
      bfFromChange5(e) {
        console.log(e);
        this.changeForm5Bf = e.value
      },
      from5Change(item) {
        const bkChangeForm5 = [{
          label: 'αu',
          value: 1
        }, {
          label: 'A',
          value: 0.5291772083
        },
        ]
        if (this.changeForm5Bf == null) {
          for (let i = 0; i < bkChangeForm5.length; i++) {
            if (item.label == bkChangeForm5[i].label) {
              this.changeForm5Bf = bkChangeForm5[i].value
            }
          }
          this.changeForm5 = bkChangeForm5
        }
        this.changeForm5Af = item.value
        const num = this.changeForm5Af / this.changeForm5Bf
        console.log(this.changeForm5Af, this.changeForm5Bf, num);
        this.changeForm5.forEach(form => {
          if (form.label !== item.label) {
            form.value = new Decimal(num).mul(new Decimal(form.value)).toPrecision(3);
          } else {
            form.value = (new Decimal(item.value)).toNumber().toPrecision(3)
          }
        });
      },
      //
      postList(file, fileList) {
        console.log(file, fileList);
        this.fileList[this.molIndex] = file.raw
  
      },
      getListIndex(e) {
        console.log(e);
        this.molIndex = e
      },
      delItemInfo(e, i) {
        for (let index = 0; index < this.markData.length; index++) {
          // this.markData.splice(i, 1);
          if (index + 1 == i) {
            this.markData.splice(i - 1, 1);
          }
        }
        for (let i = 0; i < this.markData.length; i++) {
          this.markData[i].index = i + 1
        }
      },
      makeItemInfo(e, i, obj) {
        console.log(this.fileList, this.fileList[i], i);
        if (this.fileList[i]) {
          let formdata = new FormData();
          formdata.append("file", this.fileList[i]);
  
          console.log('1', formdata);
          this.$http.post(`/molecular_structure`, formdata).then((res) => {
            console.log(this.markData);
            for (let index = 0; index < res.data.data.Formula.length; index++) {
              this.markData[i - 1] = res.data.data
              this.markData[i - 1].index = i
              this.markData[i - 1].formula = res.data.data.Formula[index]
            }
          })
          this.addNewItem()
  
        } else {
          let smiles = ''
          let cas_no = ''
          let inchi = ''
          let inchiKey = ''
          let str1 = ''
          let str2 = ''
          let str3 = ''
          let str4 = ''
          let str = ''
          if (obj.hasOwnProperty('smiles') && obj['smiles']) {
            smiles = obj['smiles'];
            str1 = `smiles=${smiles}`
          }
          if (obj.hasOwnProperty('cas_no') && obj['cas_no']) {
            cas_no = obj['cas_no'];
            str2 = `cas_no=${cas_no}`
          }
          if (obj.hasOwnProperty('inchi') && obj['inchi']) {
            inchi = obj['inchi'];
            str3 = `inchi=${inchi}`
          }
          if (obj.hasOwnProperty('inchi_key') && obj['inchi_key']) {
            inchiKey = obj['inchi_key'];
            str4 = `inchiKey=${inchiKey}`
          }
          if (str1 != '') {
            if (str2 != '') {
              if (str3 != '') {
                if (str4 != '') {
                  str = str1 + '&' + str2 + '&' + str3 + '&' + str4
                } else {
                  str = str1 + '&' + str2 + '&' + str3
                }
              } else {
                if (str4 != '') {
                  str = str1 + '&' + str2 + '&' + str4
                } else {
                  str = str1 + '&' + str2
                }
              }
            } else {
              if (str3 != '') {
                if (str4 != '') {
                  str = str1 + '&' + str3 + '&' + str4
                } else {
                  str = str1 + '&' + str3
                }
              } else {
                if (str4 != '') {
                  str = str1 + '&' + str4
                  console.log('1');
                } else {
                  str = str1
                }
              }
            }
          } else {
            if (str2 != '') {
              if (str3 != '') {
                if (str4 != '') {
                  str = str2 + '&' + str3 + '&' + str4
                } else {
                  str = str2 + '&' + str3
                  console.log('2');
                }
              } else {
                if (str4 != '') {
                  str = str2 + '&' + str4
                  console.log('3');
                } else {
                  str = str2
                }
              }
            } else {
              if (str3 != '') {
                if (str4 != '') {
                  str = str2 + '&' + str3 + str4
                } else {
                  str = str3
  
                }
              } else {
                if (str4 != '') {
                  str = str4
                } else {
                  str = str2
                }
              }
            }
          }
          console.log('str', str);
          this.$http.post(`/molecular_structure?${str}`).then((res) => {
            for (let index = 0; index < res.data.data.Formula.length; index++) {
              let data = res.data.data
              let num = i - 1 + index
              if (index == 0) {
                data.index = i + index
                data.formula = data.Formula[index]
                this.markData[num] = data
              } else {
                data.index = i + index
                data.formula = data.Formula[index]
                this.markData.splice(num, 0, data);
              }
            }
            this.addNewItem()
  
            console.log(this.markData);
          })
          // if (obj.smiles != '' && obj.smiles != undefined) {
          //   console.log('a1');
          //   if (obj.inchi != '' && obj.inchi != undefined) {
          //     console.log('a2');
          //     if (obj.inchi_key != '' && obj.inchi_key != undefined) {
          //       console.log('a3');
          //       this.$http.post(`/molecular_structure?smiles=${obj.smiles}&inchiKey=${obj.inchi_key}&inchi=${obj.inchi}`).then((res) => {
          //         console.log(this.markData);
  
          //         for (let index = 0; index < res.data.data.Formula.length; index++) {
          //           let data = res.data.data
          //           let num = i - 1 + index
          //           if (index == 0) {
          //             data.index = i + index
          //             data.formula = data.Formula[index]
          //             this.markData[num] = data
  
          //           } else {
          //             data.index = i + index
          //             data.formula = data.Formula[index]
          //             this.markData.splice(num, 0, data);
          //           }
          //         }
  
          //         this.addNewItem()
          //         console.log(this.markData);
          //       })
          //     } else {
          //       this.$http.post(`/molecular_structure?smiles=${obj.smiles}&inchi=${obj.inchi}`).then((res) => {
          //         console.log(this.markData);
  
          //         for (let index = 0; index < res.data.data.Formula.length; index++) {
          //           let data = res.data.data
          //           let num = i - 1 + index
          //           if (index == 0) {
          //             data.index = i + index
          //             data.formula = data.Formula[index]
          //             this.markData[num] = data
  
          //           } else {
          //             data.index = i + index
          //             data.formula = data.Formula[index]
          //             this.markData.splice(num, 0, data);
          //           }
          //         }
  
          //         this.addNewItem()
          //         console.log(this.markData);
          //       })
          //     }
          //   } else {
          //     if (obj.inchi_key != '' && obj.inchi_key != undefined) {
          //       console.log('b1');
          //       this.$http.post(`/molecular_structure?smiles=${obj.smiles}&inchiKey=${obj.inchi_key}`).then((res) => {
          //         console.log(this.markData);
  
          //         for (let index = 0; index < res.data.data.Formula.length; index++) {
          //           let data = res.data.data
          //           let num = i - 1 + index
          //           if (index == 0) {
          //             data.index = i + index
          //             data.formula = data.Formula[index]
          //             this.markData[num] = data
  
          //           } else {
          //             data.index = i + index
          //             data.formula = data.Formula[index]
          //             this.markData.splice(num, 0, data);
          //           }
          //         }
  
          //         this.addNewItem()
          //         console.log(this.markData);
          //       })
          //     } else {
          //       console.log('b2');
          //       this.$http.post(`/molecular_structure?smiles=${obj.smiles}`).then((res) => {
          //         console.log(this.markData);
  
          //         for (let index = 0; index < res.data.data.Formula.length; index++) {
          //           let data = res.data.data
          //           let num = i - 1 + index
          //           if (index == 0) {
          //             data.index = i + index
          //             data.formula = data.Formula[index]
          //             this.markData[num] = data
  
          //           } else {
          //             data.index = i + index
          //             data.formula = data.Formula[index]
          //             this.markData.splice(num, 0, data);
          //           }
  
          //           // this.markData[i-1+index] = res.data.data
          //           // this.markData[i-1].index=i+index
  
          //         }
  
          //         this.addNewItem()
          //         console.log(this.markData);
          //       })
          //     }
          //   }
          // } else {
          //   if (obj.inchi != '' && obj.inchi != undefined) {
          //     console.log('c1');
          //     if (obj.inchi_key != '' && obj.inchi_key != undefined) {
          //       console.log('c2');
          //       this.$http.post(`/molecular_structure?inchiKey=${obj.inchi_key}&inchi=${obj.inchi}`).then((res) => {
          //         console.log(this.markData);
  
          //         for (let index = 0; index < res.data.data.Formula.length; index++) {
          //           let data = res.data.data
          //           let num = i - 1 + index
          //           if (index == 0) {
          //             data.index = i + index
          //             data.formula = data.Formula[index]
          //             this.markData[num] = data
  
          //           } else {
          //             data.index = i + index
          //             data.formula = data.Formula[index]
          //             this.markData.splice(num, 0, data);
          //           }
          //         }
  
          //         this.addNewItem()
          //         console.log(this.markData);
          //       })
          //     } else {
          //       console.log('c3');
          //       this.$http.post(`/molecular_structure?inchi=${obj.inchi}`).then((res) => {
          //         console.log(this.markData);
  
          //         for (let index = 0; index < res.data.data.Formula.length; index++) {
          //           let data = res.data.data
          //           let num = i - 1 + index
          //           if (index == 0) {
          //             data.index = i + index
          //             data.formula = data.Formula[index]
          //             this.markData[num] = data
  
          //           } else {
          //             data.index = i + index
          //             data.formula = data.Formula[index]
          //             this.markData.splice(num, 0, data);
          //           }
          //         }
  
          //         this.addNewItem()
          //         console.log(this.markData);
          //       })
          //     }
          //   } else {
          //     if (obj.inchi_key != '' && obj.inchi_key != undefined) {
          //       console.log('b1');
          //       this.$http.post(`/molecular_structure?inchiKey=${obj.inchi_key}`).then((res) => {
          //         console.log(this.markData);
          //         for (let index = 0; index < res.data.data.Formula.length; index++) {
          //           let data = res.data.data
          //           let num = i - 1 + index
          //           if (index == 0) {
          //             data.index = i + index
          //             data.formula = data.Formula[index]
          //             this.markData[num] = data
  
          //           } else {
          //             data.index = i + index
          //             data.formula = data.Formula[index]
          //             this.markData.splice(num, 0, data);
          //           }
          //         }
  
          //         this.addNewItem()
          //         console.log(this.markData);
          //       })
          //     } else {
          //       console.log('b2');
          //       this.$http.post(`/molecular_structure?smiles=${obj.smiles}`).then((res) => {
          //         console.log(this.markData);
  
          //         for (let index = 0; index < res.data.data.Formula.length; index++) {
          //           let data = res.data.data
          //           let num = i - 1 + index
          //           if (index == 0) {
          //             data.index = i + index
          //             data.formula = data.Formula[index]
          //             this.markData[num] = data
  
          //           } else {
          //             data.index = i + index
          //             data.formula = data.Formula[index]
          //             this.markData.splice(num, 0, data);
          //           }
  
          //           // this.markData[i-1+index] = res.data.data
          //           // this.markData[i-1].index=i+index
  
          //         }
  
          //         this.addNewItem()
          //         console.log(this.markData);
          //       })
          //     }
          //   }
          // }
  
        }
      },
      addNewItem() {
        this.markData.push(
  
          {
            index: this.markData.length + 1,
            molFile: '',
            cas_no: '',
            smiles: '',
            inchi: '',
            inchi_key: '',
            svg_output_path: '',
            formula: '',
          }
        )
      },
      goHot(e) {
  
        if (e != 8) {
          let routeData = this.$router.resolve({
            path: "/ccdata/basic_result_hot",
            query: { index: e },
          });
  
          window.open(routeData.href, "_blank");
        } else {
          let routeData = this.$router.resolve({
            path: "/ccdata/doubleTable",
  
          });
  
          window.open(routeData.href, "_blank");
        }
  
      },
      //航空燃料
    //   flyData() {
    //     console.log('2313');
    //     this.$http.get('/alternative_fuels').then((res) => {
    //       this.flyArray = res.data.data.result
    //       this.flyArray.push({ Name_CN: '正癸烷+甲基环己烷' })
    //       console.log('res', this.flyArray);
    //     })
    //   },
      //切换分类
      changeType(e) {
        this.typeId = e
      },
      //分组查询切换
      handleClick(tab, event) {
        console.log(tab, event);
      },
      //搜索显示
      tableCheck() {
        this.tableFlag = !this.tableFlag
        console.log(this.tableFlag, 'this.tableFlag');
      },
  
      handleSubmit() {
  
        this.entries = [];
        this.loadingStatus = true;
        let partMatch;
        if (this.status === "accepted") {
          partMatch = true;
        } else {
          partMatch = false;
        }
        // console.log("status is " + partMatch);
        // this.$store.commit('setPartMatch',this.status)
        if (this.selected === "c" || this.selected === "e") {
          // console.log(this.molFile);
          let data = new FormData();
          console.log('fileString', this.fileString);
          if (this.fileString == "" || this.fileString == null) {
            this.errMessage = "Empty File"
            this.fail_modal = true;
            this.loadingStatus = false;
          } else {
            data.append("molfile", this.fileString);
            data.append("partMatch", false);
            this.$http.post("/thermo/result/filesearch", data).then(
              (res) => {
                if (res.data != "Failed") {
                  this.entries = res.data;
                  // this.$router.push({path:'/thermo_result',query:{arr:JSON.stringify(res.data)}})
                } else {
                  this.errMessage = "Empty Result List";
                  this.fail_modal = true;
                }
                this.loadingStatus = false;
              },
              (reason) => {
                if (reason.toString() == "Error: Request failed with status code 429") {
                  this.errMessage = "Too Many Requests"
                } else {
                  this.errMessage = ""
                }
                this.fail_modal = true;
                this.loadingStatus = false;
              }
            );
          }
          // this.$store.dispatch('setThermoType','fileUpload')
          //在方法中进行router link跳转
          // this.$router.push({path: '/thermo/result'})
        } else {
          //处理SMILES和Formula输入两种情况
          let para = {};
          if (this.selected === "b" && this.SMILES) {
            para["smiles"] = this.SMILES;
          } else if (this.selected === "a" && this.formula) {
            let charges = this.formula.match(/[-|+]|\^\d+[-|+]/g);
            para["charge"] = charges ? charges.map(item => {
              let temp = item.replace("^", "");
              return /^[-|+]$/.test(temp) ? (temp == "+" ? 1 : -1) : parseInt(temp.slice(-1) + temp.slice(0, -1));
            }).reduce((sum, cur) => {
              console.log(sum, cur);
              return sum + cur;
            }) : 0;
            para["formula"] = this.fommatter(this.formula.replace(/[-|+]|\^\d+[-|+]/g, ""));
          } else if (this.selected === "d" && this.CAS_NO) {
            para["cas_no"] = this.CAS_NO;
          } else {
            this.errMessage = "None Param";
            this.fail_modal = true;
            this.loadingStatus = false;
            throw "Null Param"
          }
          para["partMatch"] = this.selected === 'a' ? partMatch : false;
          console.log(para);
          // let params = {
          //     fileString:this.fileString
          // }
          this.$http.get("/thermo/result/", { params: para }).then(
            (res) => {
              console.log(res);
              if (res.status == 200) {
                this.entries = res.data;
                console.log(this.entries);
                this.tableCheck()
              } else {
                this.errMessage = "Empty Result List";
                this.fail_modal = true;
              }
              this.loadingStatus = false;
            },
            (reason) => {
              if (reason.toString() == "Error: Request failed with status code 429") {
                this.errMessage = "Too Many Requests"
              } else {
                this.errMessage = ""
              }
              this.fail_modal = true;
              this.loadingStatus = false;
            }
          );
        }
  
      },
  
      fommatter(item, show = false) {
        // console.log(item)
        let itoms = {}
        let old_itom = ''
        let old_item = ''
        let ind = 0;
        for (let c of item) {
          // console.log(old_item, old_itom)
          if (/[A-Z]/.test(c)) {
            if (/[1-9][0-9]*/.test(old_item)) {
              if (old_itom) {
                itoms[ind + old_itom].cnt = parseInt(old_item);
                ind++;
                if (Elements.includes(c)) {
                  itoms[ind + c] = { cnt: 1, invail: true, fup: true };
                } else {
                  itoms[ind + c] = { cnt: 1, invail: false, fup: true };
                }
                old_itom = c;
                old_item = old_itom;
              } else {
                itoms = { invalid: { cnt: 1, invail: false, fup: false } };
                break;
              }
            } else {
              ind++;
              if (Elements.includes(c)) {
                itoms[ind + c] = { cnt: 1, invail: true, fup: true }
              } else {
                itoms[ind + c] = { cnt: 1, invail: false, fup: true }
              }
            }
            old_itom = c;
            old_item = old_itom;
          } else if (/[a-z]/.test(c)) {
            if (/[1-9][0-9]*/.test(old_item)) {
              if (old_itom) {
                itoms[ind + old_itom].cnt = parseInt(old_item);
                ind++;
                if (Elements.includes(c.toUpperCase())) {
                  itoms[ind + c.toUpperCase()] = { cnt: 1, invail: true, fup: false };
                } else {
                  itoms[ind + c.toUpperCase()] = { cnt: 1, invail: false, fup: false };
                }
                old_itom = c.toUpperCase();
                old_item = old_itom;
              } else {
                itoms = { invalid: { cnt: 1, invail: false, fup: false } };
                break;
              }
            } else if (old_itom) {
              if (itoms[ind + old_itom].invail) {
                if (Elements.includes(old_itom + c)) {
                  if (itoms[ind + old_itom].fup) {
                    delete itoms[ind + old_itom];
                    itoms[ind + old_itom + c] = { cnt: 1, invail: true, fup: true }
                    old_itom = old_itom + c;
                    old_item = old_itom;
                  } else if (Elements.includes(c.toUpperCase())) {
                    itoms[ind + c.toUpperCase()] = { cnt: 1, invail: true, fup: false }
                    old_itom = c.toUpperCase();
                    old_item = old_itom;
                  } else {
                    itoms[ind + c.toUpperCase()] = { cnt: 1, invail: false, fup: false }
                    old_itom = c.toUpperCase();
                    old_item = old_itom;
                  }
                } else {
                  ind++;
                  if (Elements.includes(c.toUpperCase())) {
                    itoms[ind + c.toUpperCase()] = { cnt: 1, invail: true, fup: false };
                  } else {
                    itoms[ind + c.toUpperCase()] = { cnt: 1, invail: false, fup: false };
                  }
                  old_itom = c.toUpperCase();
                  old_item = old_itom;
                }
              } else {
                if (Elements.includes(old_itom + c)) {
                  itoms[ind + old_itom + c] = { cnt: 1, invail: true, fup: itoms[ind + old_itom].fup }
                } else {
                  // 原输入非法
                  itoms[ind + old_itom + c] = { cnt: 1, invail: false, fup: itoms[ind + old_itom].fup }
                }
                delete itoms[ind + old_itom];
                old_itom = old_itom + c;
                old_item = old_itom;
              }
            } else {
              ind++;
              if (Elements.includes(c.toUpperCase())) {
                itoms[ind + c.toUpperCase()] = { cnt: 1, invail: true }
              } else {
                itoms[ind + c.toUpperCase()] = { cnt: 1, invail: false }
              }
              old_itom = c.toUpperCase();
              old_item = old_itom;
            }
          } else if (/[0-9]/.test(c)) {
            if (/[1-9][0-9]*/.test(old_item)) {
              old_item += c;
            } else {
              old_item = c;
            }
          } else if (/[+-^]/.test(c)) {
            if (/[1-9][0-9]*/.test(old_item)) {
              if (old_itom) {
                itoms[ind + old_itom].cnt = parseInt(old_item);
                ind++;
                itoms[ind + c] = { cnt: 1, invail: true, fup: false, sp: true };
                old_itom = c;
                old_item = old_itom;
              } else {
                itoms = { invalid: { cnt: 1, invail: false, fup: false } };
                break;
              }
            } else {
              ind++;
              itoms[ind + c] = { cnt: 1, invail: true, fup: false, sp: true };
              old_itom = c;
              old_item = old_itom;
            }
          }
        }
        if (/[1-9][0-9]*/.test(old_item)) {
          if (old_itom) {
            itoms[ind + old_itom].cnt = parseInt(old_item);
          }
          else
            itoms = { invalid: { cnt: 1, invail: false, fup: false } };
        }
        let res = '';
        let cnt = 0;
        // console.log(itoms)
        for (let key in itoms) {
          cnt = 1 - cnt;
          show ? res += `<span style="color:${itoms[key].invail ? ['rgb(42, 25, 126)', 'rgb(126, 50, 25)'][cnt] : 'red'}">${key.replace(/\d+/g, '')}${itoms[key].cnt == 1 ? '' : itoms[key].cnt}</span>` : res += `${key.replace(/\d+/g, '')}${itoms[key].cnt == 1 ? '' : itoms[key].cnt}`;
        }
        // console.log(res)
        return res;
      },
      thermoFormatMols(item) {
        return formatMols(item);
      },
      // 解析从jsme传来的mol文件
      parseMolfile(data) {
        this.fileString = data;
        this.$store.dispatch("fetchFile", this.fileString);
      },
      parseFile(data) {
        console.log(data);
        this.fileString = data[1];
        this.molFile = data[0];
        // 采用Vuex Store管理，修改state的molFileContent属性。
        this.$store.dispatch("fetchFile", this.fileString);
      },
      viewResult(item) {
        let routeData = this.$router.resolve({
          path: "/ccdata/basic_result",
          query: { 'Name': item }
          //后端未转义，前端用特殊字符实现效果
  
        });
        window.open(routeData.href, "_blank");
      },
      viewResultRp(item) {
        let routeData = this.$router.resolve({
          path: "/ccdata/basic_result_rp_CQ",
          query: { 'Name': item }
          //后端未转义，前端用特殊字符实现效果
  
        });
        window.open(routeData.href, "_blank");
        // if (item != 'RP-3(2022-DL)' && item != 'RP-3(2022-CQ)') {
        //   let routeData = this.$router.resolve({
        //     path: "/ccdata/basic_result_rp",
        //     query: { 'Name': item }
        //     //后端未转义，前端用特殊字符实现效果
  
        //   });
        //   window.open(routeData.href, "_blank");
        // } else if (item == 'RP-3(2022-CQ)') {
        //   let routeData = this.$router.resolve({
        //     path: "/ccdata/basic_result_rp_CQ",
        //     query: { 'Name': item }
        //     //后端未转义，前端用特殊字符实现效果
  
        //   });
        //   window.open(routeData.href, "_blank");
        // } else {
        //   let routeData = this.$router.resolve({
        //     path: "/ccdata/basic_result_rp_Dl",
        //     query: { 'Name': item }
        //     //后端未转义，前端用特殊字符实现效果
  
        //   });
        //   window.open(routeData.href, "_blank");
        // }
  
      },
      // viewNewResult(e) {
      //   let routeData = this.$router.resolve({
      //     path: "/ccdata/hotType/new",
      //     query: { 'Name': e }
      //     //后端未转义，前端用特殊字符实现效果
  
      //   });
      //   window.open(routeData.href, "_blank");
      // },
      viewFly() {
        let routeData = this.$router.resolve({
          path: "/ccdata/basic_result_fly",
          //后端未转义，前端用特殊字符实现效果
  
        });
        window.open(routeData.href, "_blank");
      },
      viewDetails(id) {
  
        // this.$store.dispatch("setThermoResult", this.entries[id]);
  
        // let routeData = this.$router.resolve({
        //   path: "/ccdata/thermo_result",
        //   query: { smiles: this.entries[id]["SMILES"],cas_no:this.entries[id]["CAS_NO"] },
        // });
  
        let routeData = this.$router.resolve({
          path: "/ccdata/basic_result_single",
          //后端未转义，前端用特殊字符实现效果
          query: { smiles: this.entries[id]["SMILES"].replaceAll('#', "@!").replaceAll("+", "!@"), cas_no: this.entries[id]["CAS_NO"] },
        });
        //  let routeData = this.$router.push({
        //   path: "/ccdata/thermo_result",
        //   query: { smiles: this.entries[id]["SMILES"],cas_no:this.entries[id]["CAS_NO"] },
        // });
        window.open(routeData.href, "_blank");
      },
      resetSearch() {
        this.entries = [];
      },
      getPredictTable() {
        // this.predictTable=true
        let str = ""
        if (this.modelSelected == 'a') {
          str = `smiles=${this.predictValue}`
        } else {
          str = `cas_no=${this.predictValue}`
        }
        this.$http.post(`/molecular_structure?${str}`).then((res) => {
          // for (let index = 0; index < res.data.data.Formula.length; index++) {
          //   let data = res.data.data
          //   let num = i - 1 + index
          //   if (index == 0) {
          //     data.index = i + index
          //     data.formula = data.Formula[index]
          //     this.markData[num] = data
          //   } else {
          //     data.index = i + index
          //     data.formula = data.Formula[index]
          //     this.markData.splice(num, 0, data);
          //   }
          // }
          // this.addNewItem()
  
          // console.log(this.markData);
          this.predictTableData = res.data.data
          if (this.modelSelected == 'a') {
            this.predictTableData.smiles = this.predictValue
          } else {
            this.predictTableData.cas_no = this.predictValue
          }
          let data = new FormData();
          if (this.modelSelected == 'a') {
            data.append('type', 'S')
          } else {
            data.append('type', 'C')
          }
          data.append('models', [this.modelPickSelected])
          data.append('args', this.predictValue)
          this.$message.warning('查询中,请稍等')
          axios({
            url: 'http://192.168.1.142:5001/predict',
            // url: 'http://127.0.0.1:5001/predict',
            method: 'post',
            data: data
          }).then((res) => {
            if (res.data.code == 200) {
              this.predictTable = true
              this.$message({
                message: '计算完成',
                type: 'success'
              });
              if (this.modelPickSelected == '1') {
                this.predictData = Number(res.data.result.CN).toFixed(2)
              } else if (this.modelPickSelected == '2') {
                this.predictData = Number(res.data.result.BP).toFixed(2)
              } else if (this.modelPickSelected == '3') {
                this.predictData = Number(res.data.result.MP).toFixed(2)
              } else if (this.modelPickSelected == '4') {
                this.predictData = Number(res.data.result.FP).toFixed(2)
              }
            } else {
              this.$message({
                message: '预测失败',
                type: 'error'
              });
            }
          }).catch((res) => {
            this.$message({
              message: '预测失败',
              type: 'error'
            });
          })
        })
  
        // axios({
        //   url: 'http://127.0.0.1:4080/predict',
        //   method: 'post',
        //   data: data
        // }).then((res) => {
        //   if (res.data.code == 200) {
        //     this.predictTable = true
        //     this.$message({
        //       message: '计算完成',
        //       type: 'success'
        //     });
        //     if (this.modelPickSelected == '1') {
        //       this.predictData = res.data.result.CN
        //     } else if (this.modelPickSelected == '2') {
        //       this.predictData = res.data.result.BP
        //     } else if (this.modelPickSelected == '3') {
        //       this.predictData = res.data.result.MP
        //     } else if (this.modelPickSelected == '4') {
        //       this.predictData = res.data.result.FP
        //     }
        //   } else {
        //     this.$message({
        //       message: '预测失败',
        //       type: 'error'
        //     });
        //   }
        // }).catch((res) => {
        //   this.$message({
        //     message: '预测失败',
        //     type: 'error'
        //   });
        // })
        //  axios.post('http://192.168.1.142:5001/predict')
        // this.$http.post("/predict",data).then((res)=>{
        //   if (res.data.code==200) {
        //     this.predictTable=true
        //     this.$message.success('查询成功')
        //     if (this.modelPickSelected=='1') {
        //       this.predictData=res.data.result.CN
        //     }else if(this.modelPickSelected=='2') {
        //       this.predictData=res.data.result.BP
        //     }else if(this.modelPickSelected=='3') {
        //       this.predictData=res.data.result.MP
        //     }else if(this.modelPickSelected=='4') {
        //       this.predictData=res.data.result.FP
        //     }
        //   }else  {
        //     this.$message.error('预测失败，请尝试更换物种')
        //   }
  
        // })
      }
    },
    watch: {
      formula(val) {
        this.formulaNotice = 0;
        this.$nextTick(_ => {
          this.formulaNotice = /[+|-]/.test(val);
        });
      },
      selected() {
        this.entries = []
      }
    },
    mounted() {
      console.log('232131313');
    //   this.flyData()
    },
    computed: {
      searchValue() {
        // 将上传的文件发送到后端，使用openbabel处理生成SMILES，然后检索。SMILES检索方式发送SMILES到后端，在线建模方式，保存为MOL文件，然后发送到后端处理。分子式查询方式不变。
        if (this.selected === "b") {
          // console.log(document.JME1.smiles());
          return this.SMILES;
        } else if (this.selected === "a") {
          return this.formula;
        }
      },
      current_data() {
        this.currentTab = 0;
        this.computedCount = this.computedCount + 1
        if (this.computedCount > 1) {
          this.treeTitle = this.now_choice["0"].data.text
  
        }
  
  
        let arr = this.detailData[this.now_choice["0"] ? this.now_choice["0"]["text"] : ""];
  
        let ot = [];
        if (this.now_choice["0"] && this.now_choice["0"]['text'] == '点击机理自动构建') {
          this.$router.push('/gen')
        }
        if (this.now_choice["0"] && (this.now_choice["0"]['text'] == '燃料燃烧反应机理' || this.now_choice["0"]['text'] == "其他燃烧反应机理链接")) {
          console.log(this.now_choice["0"]['text']);
          return []
        }
        ot.otherInfo = this.now_choice["0"];
        console.log(this.treeOptions, 'treeOptions');
        return arr ? arr.map((item, ind) => { console.log(arr, 'arr'); return { item, ind, color: this.colors[ind] } }) : ot;
      },
  
      /**
      * @Title 能量单位转换label标签排序
      * @Author wcw
      * @Date 2024/12/18 16:56:14
      */
      sortedChangeForm1() {
         const sortedArray = [...this.changeForm1];
        // 按照 label 长度排序，较短的在前
        sortedArray.sort((a, b) => a.label.length - b.label.length);
        return sortedArray;
      },
      // sortedChangeForm1() {
      //   // 创建一个原始数组的副本以避免改变原数据
      //   const sortedArray = [...this.changeForm1];
      //   // 按照 label 长度排序，较短的在前
      //   sortedArray.sort((a, b) => a.label.length - b.label.length);
  
      //   // 查找 cm-1 和 Hartree 的索引，并交换它们的位置
      //   let cm1Index = -1;
      //   let hartreeIndex = -1;
  
      //   sortedArray.forEach((item, index) => {
      //     if (item.label === 'cm-1') cm1Index = index;
      //     else if (item.label === 'Hartree') hartreeIndex = index;
      //   });
  
      //   // 如果找到了两个元素，则交换它们的位置
      //   if (cm1Index !== -1 && hartreeIndex !== -1) {
      //     [sortedArray[cm1Index], sortedArray[hartreeIndex]] =
      //       [sortedArray[hartreeIndex], sortedArray[cm1Index]];
      //   }
  
      //   // 确保 cm-1 总是在 Hartree 后面
      //   for (let i = 0; i < sortedArray.length - 1; i++) {
      //     if (sortedArray[i].label === 'cm-1' && sortedArray[i + 1].label === 'Hartree') {
      //       // 如果发现 cm-1 在 Hartree 之前，交换它们的位置
      //       [sortedArray[i], sortedArray[i + 1]] = [sortedArray[i + 1], sortedArray[i]];
      //       break; // 只需要做一次交换
      //     }
      //   }
  
      //   console.log(sortedArray, 'sortedArray');
      //   return sortedArray;
      // },
      sortedChangeForm2() {
        // 创建一个原始数组的副本以避免改变原数据
        const sortedArray = [...this.changeForm2];
        console.log(sortedArray, 'sortedArray');
  
        // 按照 label 长度排序，较短的在前
        sortedArray.sort((a, b) => a.label.length - b.label.length);
  
        // 查找 mmH2O 和 kgf/m2 的索引，并交换它们的位置
        let mmH2OIndex = -1;
        let kgfM2Index = -1;
  
        sortedArray.forEach((item, index) => {
          if (item.label === 'mmH2O') mmH2OIndex = index;
          else if (item.label === 'kgf/m²') kgfM2Index = index;
        });
  
        // 如果找到了两个元素，则交换它们的位置
        if (mmH2OIndex !== -1 && kgfM2Index !== -1) {
          [sortedArray[mmH2OIndex], sortedArray[kgfM2Index]] =
            [sortedArray[kgfM2Index], sortedArray[mmH2OIndex]];
        }
  
        // 确保 mmH2O 总是在 kgf/m2 后面
        for (let i = 0; i < sortedArray.length - 1; i++) {
          if (sortedArray[i].label === 'mmH2O' && sortedArray[i + 1].label === 'kgf/m²') {
            // 如果发现 mmH2O 在 kgf/m2 之前，交换它们的位置
            [sortedArray[i], sortedArray[i + 1]] = [sortedArray[i + 1], sortedArray[i]];
            break; // 只需要做一次交换
          }
        }
  
        console.log(sortedArray, 'sortedArray');
        return sortedArray;
      },
      // sortedChangeForm2() {
      //   const sortedArray = [...this.changeForm2];
      //   // 按照 label 长度排序，较短的在前
      //   sortedArray.sort((a, b) => a.label.length - b.label.length);
      //   return sortedArray;
      // }
    }
  };
  </script>
  
  <style lang='scss'>
  .basicSearch {
    .dataChage {
      padding-bottom: 20px;
  
      .part {
  
        .title {
          margin-top: 20px;
          text-align: center;
        }
  
        .formPart {
          display: grid;
          grid-template-columns: 16.6% 16.6% 16.6% 16.6% 16.6% 16.6%;
          margin-bottom: 20px;
        }
  
        .formPart2 {
          padding: 10px;
          display: grid;
          grid-template-columns: 20% 20% 20% 20% 20%;
          margin-bottom: 20px;
          justify-items: center;
        }
  
        .form {
          display: flex;
          align-items: center;
          margin-top: 10px;
  
          .label {
            width: 95px;
            text-align: right;
            font-size: 1.2rem;
            color: #333;
  
          }
  
          .el-input {
            // width: 175px;
            width: 125px;
          }
        }
      }
    }
  
    .el-tabs__item.is-active {
      color: #b4480d !important;
    }
  
    .el-tabs__active-bar {
      background-color: #b4480d
    }
  
  
    .el-tabs__nav-wrap::after {
      display: none !important;
    }
  
    .singPage {
      .pegeHeader {
        background-color: #fff;
        display: flex;
        align-items: center;
  
        .icon {
          width: 4px;
          height: 20px;
          margin-right: 5px;
          background-color: rgb(180, 72, 13)
        }
  
        .title {
          font-size: 1.1rem;
        }
  
        .description {
          font-size: 1rem;
          margin-left: 5px;
  
          span {
            color: red;
          }
        }
      }
  
      .searchArea {
        display: flex;
        align-items: center;
        font-size: 1rem;
        margin: 20px 0;
  
        .name {
          margin: 0 30px;
          display: flex;
          align-items: center;
        }
      }
  
      .searchResulu {
        .header {
          display: flex;
          align-items: center;
  
          .icon {
            width: 4px;
            height: 20px;
            margin-right: 5px;
            background-color: rgb(180, 72, 13)
          }
  
          .description {
            font-size: 1rem;
            margin-left: 5px;
  
            span {
              color: red;
            }
          }
        }
      }
  
    }
  
    .methClass {
      .el-input.is-disabled .el-input__inner {
        background-color: #fff;
        color: #333;
      }
    }
  
    @media screen and (min-width: 988px) {
      .search-method {
        max-width: 9rem;
      }
  
      .search-match {
        max-width: 8rem;
      }
  
      .btn-select {
        max-width: 200px;
      }
    }
  
    @media screen and (max-width: 768px) {
      .btn-search {
        margin-right: 10px;
        float: right;
        max-width: 18%;
      }
  
      .btn-select {
        width: 100%;
      }
  
      .search-result {
        margin-top: 25px;
      }
    }
  
    @media screen and (max-width: 590px) {
      .btn-select {
        width: 91%;
      }
  
      .thermo_flex_input {
        width: 91%;
      }
    }
  
    .morePage {
      .firstType {
        margin-bottom: 15px;
  
        .header {
          display: flex;
          align-items: center;
  
          .icon {
            width: 4px;
            height: 20px;
            margin-right: 5px;
            background-color: rgb(180, 72, 13)
          }
  
          .title {
            font-size: 1.5rem;
            color: #000
          }
  
        }
  
      }
  
    }
  
    .pageFooter {
      .header {
        display: flex;
        align-items: center;
        margin-top: 30px;
  
        .icon {
          width: 4px;
          height: 20px;
          margin-right: 5px;
          background-color: rgb(180, 72, 13)
        }
  
      }
  
      .info {
        margin-top: 10px;
        font-size: 1rem;
        text-align: left;
      }
    }
  
    .btn-search {
      height: 50px;
      line-height: 50px;
      padding-top: 0;
      padding-bottom: 0;
      border-radius: 5px;
      /* vertical-align: revert; */
      background-color: rgb(46, 134, 171);
      max-width: 120px;
      font-size: 1.5rem;
    }
  
    .el-button {
      font-size: 1.4rem;
    }
  
    .typeClassPcik {
      border: 1px solid #b4480d;
      color: #a53e16;
    }
  
    .typeClass {
      background-color: #a53e16 !important;
      border-color: #a53e16 !important;
      color: #fff !important;
    }
  
  
    // .typeTitle {
    //   .el-button:focus {
    //     background-color: #a53e16 !important;
    //     border-color: #a53e16 !important;
    //     color: #fff !important;
    //   }
    // }
  
    // ::v-deep .el-button:active {
    //   background: rgb(230, 162, 60) !important;
    //   border-color: rgb(230, 162, 60) !important;
    //   color: #fff !important;
    // }
  
  
  
    .fontClass {
      font-size: 1.8rem !important;
      font-weight: 700;
    }
  
    .search-method {
      line-height: 42px;
      font-size: 1.6rem;
      height: 50px;
  
    }
  
    .rowMethod {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
  
      .simple {
        border-radius: 50px;
        width: 8px;
        height: 8px;
        background: #516373;
        margin-right: 5px
      }
    }
  
    .lqtree>>>.tree-root>.tree-node>.tree-content>.tree-anchor {
      font-size: 1.6rem !important;
      line-height: 1.6rem;
      color: #ffffff;
    }
  
    .lqtree>>>.tree-root>.tree-node>.tree-content>.tree-arrow::after {
      border: 1.5px solid #ffffff;
      border-left: 0;
      border-top: 0;
    }
  
    .lqtree>>>.tree-root>.tree-node>.tree-content {
      background-color: #a53e16;
    }
  
    .lqtree>>>.tree-root>.tree-node:first-child>.tree-content {
      border-top-right-radius: 5px;
    }
  
    .lqtree>>>span {
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  
    .typeInfo {
      margin-top: 20px;
    }
  
    .upload-demo {
      .upMol {
        height: 40px;
        font-size: 0.8rem !important;
        background-color: #eaecef;
        border: 1px solid #eaecef;
        color: #666666;
        padding: 9px 5px;
      }
  
      .el-input {
        height: 32px;
        color: black !important;
  
      }
  
      ::v-deep .el-input__inner {
        font-size: 0.8rem !important;
        color: black !important;
      }
    }
  
    .dataMake {
      height: 40px;
      padding: 5px 12px;
      background-color: #b4480d;
      border: 1px solid #b44927;
      color: #fff;
      font-size: 0.8rem !important;
    }
  
    .addItem {
      margin-top: 20px;
      background-color: #b4480d;
      border: 1px solid #b44927;
      font-size: 1.2rem !important;
      color: #fff
    }
  
    .svgMake {
      width: 60px;
      height: 60px;
    }
  
    .el-upload-list__item {
      display: none;
    }
  
    .baiscSearchTable {
      .table td {
        border: none;
        border-top: 1px solid #dee2e6;
      }
  
      .table th {
        border: none;
        border-bottom: 2px solid #dee2e6;
      }
    }
  }
  
  .el-tabs--left .el-tabs__item.is-left {
    font-size: 1.4rem;
    text-align: left;
    font-weight: 700 // color:#000 !important;
  }
  
  .nav-tab-wrap .nav-list {
    flex: 1;
    display: flex;
    font-size: 1.3rem
  }
  
  .nav-tab-wrap .nav-list .nav-item {
    font-size: 1.3rem;
    cursor: pointer;
    padding: 12px 26px;
    border-top-right-radius: 20px;
    border-right: white solid 1px;
    border-top: white solid 1px;
    color: rgb(0, 0, 0);
  
  }
  
  .nav-tab-wrap .nav-list .nav-item+.nav-item {
    margin-left: -20px;
  }
  
  .nav-tab-wrap .nav-list .nav-item:hover {
    color: rgb(175, 41, 0);
  }
  
  .nav-tab-wrap .nav-list .nav-item.active {
    transform: translateY(-10px);
    transition: all .6s;
  }
  
  @media screen and (max-width: 700px) {
    .nav-tab-wrap .nav-list .nav-item {
      font-size: 1rem;
    }
  }
  
  .tree-anchor {
    font-size: 1.3rem
  }
  
  .tree-children .tree-anchor {
    font-size: 1.2rem
  }
  </style>
  